<template>
  <div class="app-container">
    <el-form class="basic-form" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="项目说明" prop="content" required>
        <tinymce ref="tinymce" v-model="form.content" :height="300" />
      </el-form-item>

      <el-form-item>
        <el-button v-waves type="primary" @click="handleSubmit(form)">提交</el-button>
        <el-button v-waves @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as homeHttp from '@/api/home';
import { EventBus } from '@/utils/event-bus';
import waves from '@/directive/waves';
import Tinymce from '@/components/Tinymce';

export default {
  name: 'medical',
  components: { Tinymce },
  directives: { waves },
  data() {
    return {
      form: {},
      rules: {
        medical: [{ required: true, message: '请输入项目背景' }]
      },
      id: ''
    }
  },
  created() {
    const { id } = this.$route.params;

    if (id) {
      this.id = id;
      this.getData();
    }

    const levelList = [
      // { title: '产品列表', path: '/product' },
      // { title: '服务详情', path: id ? '/product/edit/' + id : '/product/create' },
      { title: '数字影像服务', path: id ? `/product/medical/${id}` : '/product/medical', redirect: 'noRedirect' },
      { title: '解决问题', path: id ? `/product/feature/${id}` : '/product/feature' },
      { title: '产品效益', path: id ? `/product/advantage/${id}` : '/product/advantage' },
      { title: '应用场景', path: id ? `/product/product/${id}` : '/product/product' }
    ];
    EventBus.$emit('custom-breadcrumb', levelList);
  },

  methods: {
    async getData() {
      const res = await homeHttp.getSolutionById({ id: this.id });

      this.form = res.data.Data;
    },

    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          const res = await homeHttp.updateSolution({ ...this.form, id: this.id });

          if (!res.data.Data) throw new Error('提交失败');

          this.$router.push(`/solutions/edit/${this.id || -1}`);
        } catch(e) {
          console.log('solution/feature/medical: ', e);
          this.$message.error('提交失败');
        }
      });
    },
    handleReset() {
      this.$refs['form'].resetFields();
    }
  }
}
</script>
